<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">
        服务介绍
      </el-menu-item>
      <el-menu-item index="2">
        </router-link><router-link to="/">刷新</router-link>
      </el-menu-item>
      
    </el-menu>

    <el-table :data="abilitiesList" border style="width: 100%">
      <el-table-column prop="serviceId" label="服务id" width="180">
      </el-table-column>
      <el-table-column prop="serviceName" label="服务名称" width="180">
      </el-table-column>
      <el-table-column prop="abilityId" label="能力id" width="180"> 
      </el-table-column>
      <el-table-column prop="abilityName" label="能力名称" width="180">
      </el-table-column>
      <el-table-column prop="abilityInfo" label="能力介绍" width="180">
      </el-table-column>
      <el-table-column prop="abilityValue" label="应用价值" width="180"> 
      </el-table-column>
      <el-table-column prop="abilityEnv" label="应用场景" width="180">
      </el-table-column>
      <el-table-column prop="likesCount" label="点赞" width="180">
        <template slot-scope="scope">
          <el-button @click="deleted(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="hand(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 15px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            abilitiesList：[],
        }
    }
    created() {
        this.getAbilitiesList()
    },
    methods: {
        async getAbilitiesList(){
          
        }
    },
}

</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #000;
}
</style>